iT邦幫忙

2022 iThome 鐵人賽

DAY 30
1
Modern Web

你 React 了嗎? 30 天解鎖 React 技能系列 第 30

[DAY 30] 將網站部署到 Github Pages 吧!

  • 分享至 

  • xImage
  •  

[情境劇場]

小當家:哇!怎麼來了這麼多外國人

解師傅:嘿嘿~因為我們把網站偷偷發布上線了,沒想到成效這麼好啊!

React 熱炒店已名聲遠播,但這不會是終點,它們會為世人再做出更美味的料理


cover

gh-pages 可以將我們製作的專案很簡易的部署到 Github

安裝 gh-pages

// npm
npm install --save gh-pages

// yarn
yarn add gh-pages

先安裝 gh-pages,接著執行下面的動作


1. package.json 添加 homepage、scripts 指令

package.json

{
	"name": "my-app",
	"homepage": "https://myusername.github.io/my-app",
	// more...
}

加入 homepage,在 myusername 帶入自己的 github 帳號、在 my-app 帶入專案名稱

{
  "scripts": {
	"predeploy": "npm run build",
	"deploy": "gh-pages -d build",
    // more...
  }
}

在 scripts 欄位中添加 predeploy、deploy 指令


2. 在 GitHub 上新建 repository

git remote add origin https://github.com/myusername/my-app.git
git branch -M main
git push -u origin main

myusername 為自己的 github 帳號、my-app 為專案名稱


3. 部署

npm run deploy

在終端機輸入指令


4. 在 Github 上開啟 Github Page

gh-pages

部署後會多了一個 gh-pages 分支,將網站指定此分支後,部署就完成囉!/images/emoticon/emoticon42.gif


Reference

部署 React App
[Day 29 - 即時天氣] 寫網頁就是要炫耀啊,不然要幹麻?發布上 Github Pages 吧!


完賽心得

為期 30 天的鐵人賽完成了~~~太令人感動的一刻!
很開心自己可以堅持到最後,每天要寫一篇技術文章不是一件容易的事,
在寫文章同時也更了解 React 的生態,也可能可以幫助到別人(不知道有沒有XD)
IT 鐵人賽完賽 get~明年再見吧!!/images/emoticon/emoticon58.gif


本文將同步更新至我的部落格
Lala 的前端大補帖



上一篇
[DAY 29] useReducer 處理複雜邏輯的 state
系列文
你 React 了嗎? 30 天解鎖 React 技能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
隱士者
iT邦新手 4 級 ‧ 2022-10-15 10:50:03

恭喜完賽/images/emoticon/emoticon01.gif

Lala Code iT邦新手 4 級 ‧ 2022-10-15 23:43:32 檢舉

耶!!謝謝~~~你也是/images/emoticon/emoticon37.gif

我要留言

立即登入留言